<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 实验室管理系统</el-breadcrumb-item>
                <el-breadcrumb-item>实验室管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="primary" icon="delete" class="handle-del mr10" @click="delGroup('sels')">批量删除</el-button>
            <el-input v-model="select_word" placeholder="输入查询关键字" class="handle-input mr10"></el-input>
            <el-button type="info" plain icon="search" @click="search">搜索</el-button>
            <el-button type="info" plain icon="edit" @click="adddateDogVis=true">添加实验室信息</el-button>
            <el-button type="info" plain icon="el-icon-download" @click="downloadfile">导出详细信息</el-button>
        </div>
        <el-dialog title="添加实验室信息" :visible.sync="adddateDogVis"  size="small">
            <el-form :model="addruleForm" :rules="rules" ref="addruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="门牌号" prop="doorNumber">
                    <el-input v-model="addruleForm.doorNumber" ></el-input>
                </el-form-item>
                <el-form-item label="实验室名称" prop="labName">
                    <el-input v-model="addruleForm.labName"></el-input>
                </el-form-item>
                <el-form-item label="负责人" prop="labManager">
                    <el-input v-model="addruleForm.labManager"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话" prop="phoneNumber">
                    <el-input v-model="addruleForm.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="实验室类型" prop="labType">
                    <el-input v-model="addruleForm.labType"></el-input>
                </el-form-item>
                <el-form-item label="软件配置" prop="software">
                    <el-input v-model="addruleForm.software"></el-input>
                </el-form-item>
                <el-form-item label="设备配置" prop="software">
                    <el-input v-model="addruleForm.configuration"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('addruleForm')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-table :data="tableData" border style="width: 100%"  @selection-change="selsChange" >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="70" label="序号"></el-table-column>
            <el-table-column prop="doorNumber" label="门牌号" ></el-table-column>
            <el-table-column prop="labName" label="实验室名称"></el-table-column>
            <el-table-column prop="labManager" label="负责人"></el-table-column>
            <el-table-column prop="phoneNumber" label="负责人电话" ></el-table-column>
            <el-table-column prop="labType" label="实验室类型"></el-table-column>
            <el-table-column prop="software" label="软件配置"></el-table-column>
            <el-table-column prop="configuration" label="设备配置"></el-table-column>
            <el-table-column label="操作"   fixed="right" width="150">
                <template slot-scope="scope" style="width: 150px">
                    <!--<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
                    <el-button size="mini" type="danger" @click="delOne(scope.$index, scope.row)" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-show="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="15"
            layout="prev, pager, next, jumper"
            :total="count">
        </el-pagination>
        <el-pagination v-show="!page"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page.sync="pageNum1"
            :page-size="15"
            layout="prev, pager, next, jumper"
            :total="count1">
        </el-pagination>
        <el-dialog title="完善实验室信息" :visible.sync="updateDogVis"  size="small">
            <el-form :model="updataruleForm" :rules="rules" ref="updataruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="门牌号" prop="doorNumber">
                    <el-input v-model="updataruleForm.doorNumber"  :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="实验室名称" prop="labName">
                    <el-input v-model="updataruleForm.labName"></el-input>
                </el-form-item>
                <el-form-item label="负责人" prop="labManager">
                    <el-input v-model="updataruleForm.labManager"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话" prop="phoneNumber">
                    <el-input v-model="updataruleForm.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="实验室类型" prop="labType">
                    <el-input v-model="updataruleForm.labType"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" prop="department">
                    <el-input v-model="updataruleForm.department"></el-input>
                </el-form-item>
                <el-form-item label="实验室介绍" prop="labIntroduction">
                    <el-input v-model="updataruleForm.labIntroduction"></el-input>
                </el-form-item>
                <el-form-item label="软件配置" prop="software">
                    <el-input v-model="updataruleForm.software"></el-input>
                </el-form-item>
                <el-form-item label="设备配置" prop="configuration">
                    <el-input v-model="updataruleForm.configuration"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleupdata('updataruleForm')">立即修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                sels: [],//选中的值显示
                tableData: [{
                    doorNumber: '',
                    labName: '',
                    labManager: '',
                    phoneNumber: '',
                    labType: '',
                    department:'',
                    computerNumber: '',
                    availableComputer: '',
                    labIntroduction:'',
                    configuration:'',
                    software:'',
                    uuid:''
                }],
                addruleForm: {
                    doorNumber: '',
                    labName: '',
                    labManager: '',
                    phoneNumber: '',
                    labType: '',
                    software:'',
                    configuration:'',
                    uuid:''
                },
                updataruleForm: {
                    doorNumber: '',
                    labName: '',
                    labManager: '',
                    phoneNumber: '',
                    labType: '',
                    department:'',
                    computerNumber: '',
                    availableComputer: '',
                    labIntroduction:'',
                    configuration:'',
                    software:'',
                    uuid:''
                },
                select_word:'',
                pageNum: 1,
                pageNum1: 1,
                pageSize:15,
                count:0,
                count1:0,
                page:true,
                updateDogVis:false,
                adddateDogVis:false,
                dialogVisible: false,
                rules: {
                    doorNumber: [
                        { required: true, message: '请输入实验室门牌号', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    labName: [
                        { required: true, message: '请输入实验室名称', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    labManager: [
                        { required: true, message: '请输入实验室管理员', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    phoneNumber: [
                        { required: true, message: '请输入管理员电话号码', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }
                    ],
                    labType: [
                        { required: true, message: '请输入实验室类型', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    software: [
                        { required: true, message: '请输入软件配置', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    configuration: [
                        { required: true, message: '请输入所属设备配置', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                }

            }
        },
        created(){
            this.getData();
        },
        computed: {

        },

        methods: {
            downloadfile(){
                window.location.href='/text/lab/getExcel';
            },
            getData(){
                this.page=true;
                this.$axios.get('text/lab/query?pageNum=1').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.tableData= res.data.data.list;
                    this.count=res.data.data.total;

                })
            },
            handleEdit(index, row) {
                this.updateDogVis = true;
                this. updataruleForm= row;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                            this.$axios.post('text/lab/insert?' +
                                'doorNumber=' + this.addruleForm.doorNumber +
                                "&labName=" + this.addruleForm.labName+
                                "&labManager=" + this.addruleForm.labManager+
                                "&phoneNumber=" + this.addruleForm.phoneNumber+
                                "&labType=" + this.addruleForm.labType+
                                 "&software=" + this.addruleForm.software+
                                "&configuration=" + this.addruleForm.configuration

                            ).then((res) => {
                                this.getData();
                                console.log(res.data.code);
                                if(res.data.code==200)
                                {
                                    this.$message({
                                        message: '添加实验室成功！！',
                                        type: 'success'
                                    });
                                }
                                else if (res.data.coed==401)
                                    this.$message.error('该实验室已经存在，请勿重复提交！！');
                                else
                                    this.$message.error('添加实验室失败，请检查信息！！');
                                this.adddateDogVis=false;
                                this.resetForm('addruleForm');
                            })
                    }
                    else {
                        console.log('error submit!!');
                        return false;
                    }

                });
            },
            handleupdata(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.put('text/lab/updata?' +
                            'uuid='+this.updataruleForm.uuid+
                             '&doorNumber=' + this.updataruleForm.doorNumber +
                            "&labName=" + this.updataruleForm.labName+
                            "&labManager=" + this.updataruleForm.labManager+
                            "&phoneNumber=" + this.updataruleForm.phoneNumber+
                            "&labType=" + this.updataruleForm.labType+
                            "&department=" + this.updataruleForm.department+
                            "&labIntroduction=" + this.updataruleForm.labIntroduction+
                            "&configuration=" + this.updataruleForm.configuration+
                            "&software=" + this.updataruleForm.software
                        ).then((res) => {
                            this.getData();
                            console.log(res.data.code);
                            if(res.data.code==200)
                            {
                                this.$message({
                                    message: '修改实验室信息成功！！',
                                    type: 'success'
                                });
                            }
                            else this.$message.error('修改实验室失败!!!');
                            this.updateDogVis=false;
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            selsChange(sels) {
                this.sels = sels;
            },
            delGroup() {
                var uuids = this.sels.map(item => item.uuid).join()//获取所有选中行的id组成的字符串，以逗号分隔
                console.log(uuids);
                this.$confirm('该操作将永久删除选中的文件，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete('/text/lab/batchdeleteuuid?' +
                        'uuid=' + uuids
                    ).then((res) => {
                        this.getData();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
           delOne(index, row) {
               this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
                   this.$axios.delete('text/lab/deletebyuuid?' +
                       'uuid=' + row.uuid
                   ).then((res) => {
                       this.getData(),
                           this.$message({
                               type: 'success',
                               message: '删除成功!'
                           });
                   })

               }).catch(() => {
                   this.$message({
                       type: 'info',
                       message: '已取消删除'
                   });
               });
           },
            search(select_word){
                this.page=false;
                this.$axios.get('text/lab/queryfuzzy?pageNum=1'+'&doorNumber='+this.select_word).then((res) => {
                    this.tableData= res.data.data.list;
                    this.count1=res.data.data.total
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleCurrentChange(pageNum) {
                this.$axios.get('text/lab/query?pageNum='+pageNum).then((res) => {
                    this.tableData= res.data.data.list;
                })
            },
            handleCurrentChange1(pageNum1,select_word) {
                this.$axios.get('text/lab/queryfuzzy?pageNum='+pageNum1+'&doorNumber'+this.select_word).then((res) => {
                    this.tableData= res.data.data.list;
                })
            },
            handleSizeChange(val) {

            },
            handleSizeChange1(val) {

            },
        },

    }

</script>


<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .handle-select{
        width: 20px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
</style>

